<template>
  <div>
    <h1 style="margin-bottom: 20px;">商户首页</h1>
    <el-container>
      <el-aside width="calc(60% - 20px)" style="background: none;margin-right: 20px;overflow: hidden;">
        <div>
          <div
              :style="`background:url('${bakImg}') #9CABFF no-repeat 100% !important ;position: relative;border-radius: 3px;`">

            <el-card shadow="never"
                     style="height:256px;background:none;color: #fff;justify-items: center;display: flex;align-items: center;padding-left: 20px; ">

              <span style="background: rgba(255,255,255,0.2);font-size: 14px;padding: 4px 10px;border-radius: 3px;">今天是{{
                  today
                }}{{ week }}</span>
              <p style="font-size: 30px;margin: 10px 0;font-weight: bolder;">欢迎使用营销平台</p>
              <p style="font-size: 16px">一站式智能营销平台</p>

            </el-card>
          </div>

          <div style="width:100%;height:100px;background: #fff!important;margin: 20px 0;border-radius: 3px;">
            <div class="ring_card2">
              <img src="../../../assets/images/u1486.svg" alt="">
              <p>
                <span style="font-size: 26px;color: #333;">{{ openCardCount.NEW_CARD || 0 }}</span>
                <span style="margin-top: 6px;">开卡业务累计</span>
              </p>

            </div>
            <div class="ring_card2">
              <img src="../../../assets/images/u1492.svg" alt="">
              <p>
                <span style="font-size: 26px;color: #333;">{{ openCardCount.NEW_CARD_FUSE || 0 }}</span>
                <span style="margin-top: 6px;">融合业务累计</span>
              </p>

            </div>
            <div class="ring_card2">
              <img src="../../../assets/images/u4332.svg" alt="">
              <p>
                <span style="font-size: 26px;;color: #333;">{{ openCardCount.commission || 0 }}</span>
                <span style="margin-top: 6px;">佣金累计</span>
              </p>

            </div>
          </div>
        </div>
        <div style="height:200px;background: #fff;border-radius: 3px">
          <span style="height: 20px;display: block;padding: 20px">快捷入口</span>
          <el-row :gutter="12">
            <el-col :span="6" style="text-align: center;padding: 0;">
              <el-card shadow="never" style="cursor:pointer;border-width:0 1px 0 0;border-radius: 0;"
                       @click.native="toOpenCard">
                <img src="../../../assets/images/u1503.svg" alt="" style="height: 60px">
                <p>开卡业务</p>
              </el-card>
            </el-col>
            <el-col :span="6" style="text-align: center;padding: 0;">
              <el-card shadow="never" style="cursor:pointer;border-width:0 1px 0 0;border-radius: 0;"
                       @click.native="toOpenCard">
                <img src="../../../assets/images/u4355.svg" alt="" style="height: 60px">
                <p>融合业务</p>
              </el-card>
            </el-col>
            <el-col :span="6" style="text-align: center;padding: 0;">
              <el-card shadow="never" style="cursor:pointer;border-width:0 1px 0 0;border-radius: 0;"
                       @click.native="toNoticeManager">
                <img src="../../../assets/images/u1504.svg" alt="" style="height: 60px">
                <p>公告中心
                  <el-button type="primary" round size="mini" v-show="noticeCount>0">{{ noticeCount }}</el-button>
                </p>
              </el-card>
            </el-col>
            <el-col :span="6" style="text-align: center;padding: 0;">
              <el-card shadow="never" style="cursor:pointer;border: none;border-radius: 0;"
                       @click.native="toShopOrder">
                <img src="../../../assets/images/u1503.svg" alt="" style="height: 60px">
                <p>工单列表</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-aside>
      <el-main style="background-color:#FFF;padding: 0;border-radius: 3px">
        <span style="display: block;border-bottom:1px solid #EBEEF3;height: 60px;line-height: 60px;padding-left: 20px">最新业务</span>
        <el-card v-for="i in newestBusinessOrder" :key="i.id" shadow="hover" class="ring_card"
                 @click.native="toShopOrderView(i)">
          <div style="color: #333;font-size: 16px;margin-bottom:10px">
            <span>{{ i.businessTypeName }}</span>
            <span style="float: right;">【{{ i.cardNo }}】</span>
            <div style="color: #6D75A0;font-size: 12px;" v-if="i.businessState==='REJECT'">驳回原因：{{ i.reviewComments }}</div>
          </div>
          <div>
            <span style="color: #6D75A0;font-size: 12px;">{{ i.createTime }}</span>
            <el-tag style="height: 24px;line-height:24px;float: right;"
                    :type="i.businessState==='HANDLED'?'success':'warning'">{{ i.businessStateName }}
            </el-tag>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/Request";
import bakImg from "@/assets/images/banner.png";
import EventBus from "@/utils/EventBus";

export default {
  name: "ShopIndex",
  data() {

    const date = new Date();
    const weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    return {
      openCardCount: {},
      today: date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日',
      week: weeks[date.getDay()],
      newestBusinessOrder: [],
      bakImg: bakImg,
      interval: {},
      noticeCount: 0,
    }
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  mounted() {
    this.init();
    this.interval = setInterval(() => {
      this.init();
    }, 10000);
  },
  methods: {
    toShopOrderView({id,businessState}) {
      if (businessState === 'REJECT') {
        this.$router.push({path: '/CardOpen', query: {orderId:id}});
      } else {
        this.$router.push({path: '/ShopOrderView', query: {id}});
      }
    },
    toNoticeManager() {
      this.$router.push({path: '/NoticeView'});
    },
    toOpenCard() {
      this.$router.push({path: '/CardOpenBusiness'});
    },
    toShopOrder() {
      this.$router.push({path: '/ShopOrderManager'});
    },
    init() {
      request.get("/businessWorkbench/shopCardCount", {params: {}}).then(({data}) => {
        if (data.success) {
          this.openCardCount = data.data;
        } else {
          this.$message({type: 'error', message: data.message});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询业务量失败"});
        console.log(err)
      });
      request.get("/businessWorkbench/newestShopOrder", {params: {}}).then(({data}) => {
        if (data.success) {
          this.newestBusinessOrder = data.data;
        } else {
          this.$message({type: 'error', message: data.message});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询最新业务失败"});
        console.log(err)
      });
    }
  }
}
</script>

<style scoped>
.ring_card {
  cursor: pointer;
  border-width: 0 0 1px 0;
  border-bottom: 1px solid #EBEEF3;
  margin-bottom: 1px;
  border-radius: 0;
}

.ring_card:hover {
  border-left: 3px solid #5B73FF;
  z-index: 2222222;
}

.ring_card2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.33% - 2px);
  float: left;
  /*padding: 0 20px;*/
  text-align: left;
  border-right: 1px solid #EBEEF3;
  height: 100%;
}

.ring_card2 img {
  width: 36px;
  margin-right: 20px;
  vertical-align: middle;
}

.ring_card2 span {
  font-size: 12px;
  color: #5a618b;
  display: block;
}
</style>